<template>
    <div class="map">
        <div id="mapId" style="width:100%;height:100%;min-height: 700px;"></div>
        <el-button @click="changeArea">切换</el-button>
    </div>
</template>
<script setup lang="ts">
import localPoints from '/@/assets/js/local';
import AMapLoader from '@amap/amap-jsapi-loader';
const map = ref<AMap.Map | null>(null);
let district = ref();
let polygon = ref();
let i = ref(0);
const initMap = () => {
    AMapLoader.load({
          key: '8cdf9d2591c90cc9b98344ad3c11081a', // 高德地图API Key
          version: '1.4.15', // 指定API版本
          plugins: ['AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.Scale'], // 需要使用的插件
        }).then((AMap) => {
          map.value = new AMap.Map('mapId', {
            zoom: 11, // 初始缩放级别
            center: [110.011831,21.092559], // 初始中心点坐标-深圳
            viewMode:'3D'  //使用3D视图
          });
        drawBounds(localPoints.features[0].geometry.coordinates);
        }).catch((e) => {
          console.error(e);
        });
}
const drawBounds = (bounds) => {    
        if(polygon.value){
            map.value.remove(polygon.value);
        }
        polygon.value = new AMap.Polygon({
          strokeWeight: 1,
          path: bounds,
          fillOpacity: 0.4,
          fillColor: '#80d8ff',
          strokeColor: '#0091ea'
        });
        map.value.add(polygon.value)
        map.value.setFitView(polygon.value);//视口自适应
    };
const changeArea = () => {
    i.value++;
    let bounds = localPoints.features[i.value].geometry.coordinates;
    drawBounds(bounds)
}
onMounted(() => {
    initMap();
})
</script>

   